<template>
	<!-- 非她莫属-专业技能 -->
	<view>
		<u-navbar back-text="专业技能" :border-bottom="false" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- <u-navbar back-icon-color="#000000" title="专业技能" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar> -->
		<!-- 列表 -->
		<view>
			<view style="margin: 10rpx 38rpx 0rpx 38rpx;">
				<u-row>
					<u-col span="6">
						<text class="typeface1">默认无选择，可多选</text>
					</u-col>
					<u-col span="6" text-align="right">
						<text class="typeface1">已选：</text>
						<text class="typeface2">{{num}}项</text>
					</u-col>
				</u-row>
			</view>
			
			<view class="tan_css" style="display: flex;flex-wrap:wrap; margin: 32rpx 38rpx 0rpx 38rpx;">
				<view  v-for="(item,index) in majorList" :key="index" @click="majorClick(item.skillId)" :class="item.ched?'selected':'uncheck'"
				 style="">
					<view class="border" style="padding: 23rpx 0rpx;text-align: center;width: 192rpx;">{{item.name}}</view>
					<!-- <image v-show="item.ched" src="../../../../static/icon/gou.png" style="width: 30rpx;height: 30rpx;position: relative;z-index: 2;left: 90px;bottom: 18rpx;"></image> -->
				</view>
			</view>
			
			
			<view class="bottom" @click="subPage">
				确认选择
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundColor: '#fca800',
				},
				num:0,
				majorList:[
					
					
				],
				skillIds:[]
			}
		},
		onLoad(option) {
			//获取业务内容
			if(option.skillIds){
				this.skillIds=JSON.parse(option.skillIds);
			}
			this.getmajorList(option.serviceId);
		},
		methods: {
			getmajorList(id){
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'user-search/business/skills',
				};
				let data = {
					businessId:id
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					//打印请求返回的数据 
					console.log(res);
					if (res.code == "200") {
						var datas=res.data;
						datas.forEach((item)=>{
							item.ched=false
						});
						if(this.skillIds.length > 0){
							var skillIds=this.skillIds;
							skillIds.forEach((items)=>{
								datas.forEach((item)=>{
									if(items == item.skillId){
										this.num=this.num+1;
										item.ched=true
									}
									
								});							
							});
						}
						
						this.majorList=datas;
						console.log(this.majorList)
					}else{
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				});
			},
			subPage(){
				var skillIds=[]
				this.majorList.forEach((items)=>{
					if(items.ched){
						skillIds.push(items.skillId)
					}
				});
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				prevPage.$vm.skillIdsnum = this.num;
				prevPage.$vm.skillIds = skillIds;
				uni.navigateBack({
					delta:1
				})
			},
			majorClick:function(id){
				var num=0
				this.majorList.forEach((item)=>{
					if(item.skillId == id){
						item.ched=!item.ched;
					}
				});
				console.log(this.majorList)
				this.majorList.forEach((items)=>{
					if(items.ched){
						num=num+1; 
					}
				});
				this.num=num;
				// if(this.major.indexOf(id)!=-1){
				// 	for (let i = 0; i < this.major.length; i++) {
				// 		if(id==this.major[i]){
				// 			this.major.splice(i,1);
				// 		}   
				// 	}
				// }else{
				// 	this.major.push(id);
				// }
			},
		}
	}
</script>

<style>
	.tan_css view:nth-child(3n+2){
		margin-left:7%;
		margin-right: 7%;
	}
	.typeface1{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3F3F3F;
		opacity: 1;
	}
	.typeface2{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FCA800;
		opacity: 1;
	}
	
	.selected .border{
		background: #FFFCF6;
		border: 1rpx solid #FCA800;
		/* box-shadow: 0rpx 6rpx 12rpx rgba(252, 157, 14, 0.36); */
		opacity: 1;
		border-radius: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		/* font-weight: bold; */
		color: #FCA800;
		opacity: 1;
		margin-bottom: 38rpx;
	}
	.uncheck .border{
		background: #FFFFFF;
		/* box-shadow: 0rpx 6rpx 12rpx rgba(128, 128, 128, 0.36); */
		opacity: 1;
		border-radius: 20rpx;
		border: 1rpx solid #EBEBEB;
		font-size: 26rpx;
		font-family: PingFang SC;
	/* 	font-weight: bold; */
		color: #7A7A7A;
		opacity: 1;
		margin-bottom: 38rpx;
	}
	.bottom{
		margin: 58rpx 42rpx 24rpx 42rpx;
		background: #FCA800;
		opacity: 1;
		border-radius: 36rpx;
		width: 666rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		opacity: 1;
		position: absolute;
		z-index: 2;
		bottom: 66rpx;
	}
</style>
